<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title *ngIf="aType==='name'" class="titleFont">{{ ['Name', 'Doctor'][userType - 2] | translate }}</ion-title>
    <ion-title *ngIf="aType==='email'" class="titleFont">{{ 'Email' | translate }}</ion-title>
    <ion-title *ngIf="aType==='sex'" class="titleFont">{{ 'Sex' | translate }}</ion-title>
    <ion-title *ngIf="aType==='college'" class="titleFont">{{ 'College' | translate }}</ion-title>
    <ion-title *ngIf="aType==='CH'" class="titleFont">{{ 'CooperativeHospitals' | translate }}</ion-title>
    <ion-title *ngIf="aType==='MQ'" class="titleFont">{{ 'MedicalQualifications' | translate }}</ion-title>
    <ion-title *ngIf="aType==='PH'" class="titleFont">{{ 'PersonalHonors' | translate }}</ion-title>
    <ion-title *ngIf="aType==='PD' && userType === 2" class="titleFont">{{ 'HospitalQualifications' | translate }}</ion-title>
    <ion-title *ngIf="aType==='PD' && userType === 3" class="titleFont">{{ 'HospitalInfo' | translate }}</ion-title>
    <ion-title *ngIf="aType==='TP'" class="titleFont">{{ 'TestingCost' | translate }}</ion-title>
    <ion-title *ngIf="aType==='BookingCost'" class="titleFont">{{ 'BookingCost' | translate }}</ion-title>
    <ion-title *ngIf="aType==='PN'" class="titleFont">{{ 'PhoneNumber' | translate }}</ion-title>
    <ion-title *ngIf="aType==='skype'" class="titleFont">Skype</ion-title>
    <ion-title *ngIf="aType==='DA'" class="titleFont">{{ 'DetailedAddress' | translate }}</ion-title>
    <ion-title *ngIf="aType==='RM'" class="titleFont">{{ 'ReservationMode' | translate }}</ion-title>
    <ion-buttons slot="end" (click)="savePatient()" *ngIf="aType !== 'MQ' && aType !== 'PD' && aType !== 'TP'">
        {{ 'Save' | translate }}
    </ion-buttons>
    <!-- <div class="titleFont"
      style="width: auto;height:100%;position: absolute;right: 5px;top:calc((100% - 22px)/2);color: #3075ff;"
      (click)="savePatient()">
      {{ 'Save' | translate }}
    </div> -->
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="flex-ver-cnt-cnt" *ngIf="aType==='MQ'">
      <ion-img [src]="aValue" *ngIf="!!aValue" style="width: 50vw"></ion-img>
      <ion-button style="width: 50vw" color="care" (click)="uploadImg()">{{'UploadImg' | translate}}</ion-button>
  </div>

  <div style="padding: 20px">
    <div class="diyItemStyle"
      *ngIf="aType==='name'||aType==='age'||aType==='phone'||aType==='college'||aType==='PN'||aType==='skype'||aType==='DA'||aType==='DA'||aType==='CH'">
      <ion-input placeholder="{{ ['Name', 'HospitalName'][userType - 2] | translate}}" *ngIf="aType==='name'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="{{ 'PhoneNumber' | translate}}" *ngIf="aType==='phone'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="{{ 'College' | translate}}" *ngIf="aType==='college'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="{{ 'PhoneNumber' | translate}}" *ngIf="aType==='PN'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="Skype" *ngIf="aType==='skype'" [(ngModel)]="aValue"></ion-input>
      <ion-input placeholder="{{ 'CooperativeHospitals' | translate}}" *ngIf="aType==='CH'" [(ngModel)]="aValue" readonly></ion-input>
      <ion-input placeholder="{{ 'DetailedAddress' | translate}}" *ngIf="aType==='DA'" [(ngModel)]="aValue"></ion-input>
    </div>

    <div style="margin-top: 5vh">
      <ion-item style="margin-top: 1vh;overflow: hidden;width: 100%" *ngIf="aType==='email'">
        <ion-label>{{ 'Oldemail' | translate }}</ion-label>
        <ion-input class="inputStyle" style="width:30vw;height: auto;font-size: 18px" [(ngModel)]="aValue" disabled></ion-input>
      </ion-item>

      <ion-item style="margin-top: 1vh;overflow: hidden;width: 100%" *ngIf="aType==='email'">
        <ion-label>{{ 'Email_Code' | translate }}:</ion-label>
        <ion-input class="inputStyle" style="width:30vw;height: auto;font-size: 18px" [(ngModel)]="emailCode">
        </ion-input>
        <ion-button style="width:25vw;color: white;font-size: 12px;" size="small" (click)="getCode()"
          [disabled]="!verifyCode.disable">
          {{verifyCode.verifyCodeTips | translate}}
        </ion-button>
      </ion-item>

      <ion-item style="margin-top: 1vh;overflow: hidden;width: 100%" *ngIf="aType==='email'">
        <ion-label>{{ 'Newemail' | translate }}</ion-label>
        <ion-input class="inputStyle" style="width:30vw;height: auto;font-size: 18px" [(ngModel)]="newEmail">
        </ion-input>
      </ion-item>

      <ion-item *ngIf="aType==='PH'">
        <ion-textarea placeholder="{{ 'PersonalHonors' | translate}}" [(ngModel)]="aValue" auto-grow='true'></ion-textarea>
      </ion-item>

      <ion-item *ngIf="aType==='PD'">
<!--        <ion-textarea placeholder="{{ 'HospitalQualifications' | translate}}" [(ngModel)]="aValue" auto-grow='true'></ion-textarea>-->
        <div [innerHTML]="aValue"></div>
      </ion-item>

      <ion-item *ngIf="aType==='MQ'">
<!--        <ion-textarea placeholder="{{ 'HospitalQualifications' | translate}}" [(ngModel)]="secondValue" auto-grow='true'></ion-textarea>-->
        <div [innerHTML]="secondValue"></div>
      </ion-item>

      <ion-item *ngIf="aType==='TP'">
<!--        <ion-textarea placeholder="{{ 'BookingCost' | translate}}" [(ngModel)]="aValue" auto-grow='true'></ion-textarea>-->
        <div [innerHTML]="aValue"></div>
      </ion-item>

      <ion-item *ngIf="aType==='TestingCost'">
        <ion-textarea placeholder="{{ 'TestingCost' | translate}}" [(ngModel)]="aValue" auto-grow='true'></ion-textarea>
      </ion-item>

      <ion-list *ngIf="aType === 'CH'">
        <ion-list-header></ion-list-header>
        <ion-item>
          <ion-label>{{'CooperativeHospitals' | translate}}</ion-label>
          <ion-select multiple="true" cancelText="{{'Cancel' | translate}}" okText="{{'Confirm' | translate}}" [(ngModel)]="aValue">
            <ion-select-option *ngFor="let item of hospitalBox" ionChange="selectHospital(item)">{{item.hospital_name}}
            </ion-select-option>
          </ion-select>
        </ion-item>
      </ion-list>

      <ion-button (click)="openPicker(1,defaultColumnOptions[0].length,defaultColumnOptions)" *ngIf="aType==='department'">
        {{ 'Select Speciality' | translate}}
      </ion-button>

      <ion-list *ngIf="aType==='sex'">
        <ion-radio-group [(ngModel)]="aValue" (ionChange)='sexSelect()'>
          <ion-item *ngFor="let aSex of sexBox">
            <ion-label>{{aSex.value}}</ion-label>
            <ion-radio slot="start" value='{{aSex.value}}' checked></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>

      <ion-list *ngIf="aType==='RM'">
        <ion-radio-group [(ngModel)]="aValue" (ionChange)='paySelect()'>
          <ion-item *ngFor="let aPay of payBox">
            <ion-label>{{aPay.value}}</ion-label>
            <ion-radio slot="start" value='{{aPay.value}}' checked></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </div>

  </div>
</ion-content>
